<template>
  <el-scrollbar class="avue-menu">
    <div v-if="menu && menu.length == 0 && !isHorizontal"
         class="avue-sidebar--tip">{{ $t('menuTip') }}
    </div>
    <el-menu unique-opened :default-active="activeMenu"
             :mode="setting.sidebar"
             :show-timeout="200"
             :collapse="keyCollapse">
      <sidebarItem :menu="menu" :screen="screen" first :props="website.menu"
                   :collapse="keyCollapse"></sidebarItem>
    </el-menu>
    <div class="version" v-show="website.versionSwitch">
      <a target="_blank" :href="website.versionUrl">{{ website.versionText }}</a>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {useCommonStore} from "../../../store/modules/common.js";
import {useUserStore} from "../../../store/modules/user.js";
import {useNavsStore} from "../../../store/modules/tags.js";
import sidebarItem from "./sidebarItem.vue";
import {useRouter, useRoute} from 'vue-router'
import {computed} from "vue"
import {indexKey, indexOpenMenuKey} from "@/page/index/indexSymbol.js";

const website = import('../../../config/website.js');

defineOptions({
  name: "sidebar",
})

const index = inject(indexKey)
const indexOpenMenu = inject(indexOpenMenuKey)

function created() {
  // index.openMenu()
  indexOpenMenu()
}

created();

const menu = computed(() => {
  const userStore = useUserStore();
  return userStore.menu
})

const menuId = computed(() => {
  const userStore = useUserStore();
  return userStore.menuId
})

const tag = computed(() => {
  const navsStore = useNavsStore();
  return navsStore.tag;
})

const route = useRoute();
const router = useRouter();
const activeMenu = computed(() => {
  const {meta, path} = route;
  if (meta && meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

const isHorizontal = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.setting.sidebar === 'horizontal'
})
const setting = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.setting
})
const screen = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.screen
})
const isCollapse = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.isCollapse
})
const keyCollapse = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.screen > 1 ? isCollapse.value : false
})
</script>


<style lang="scss" scoped>
</style>

